<template>
  <div id="add_user_mask">
  <!--  添加用户的二级弹窗  -->
    <el-form ref="form" :model="userObj" label-width="80px">
      <el-form-item label="用户昵称">
        <el-input v-model="userObj.nickname"></el-input>
      </el-form-item>
      <el-form-item label="用户头像">
        <el-upload
            class="avatar-uploader"
            :action="`${baseurl}/api/imgupload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <img v-if="userObj.userPortrait" :src="userObj.userPortrait" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
<!--      <el-form-item label="真实姓名">-->
<!--        <el-input v-model="userObj.realName"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="用户类型">
        <el-radio v-model="userObj.userKind" :label="0">普通用户</el-radio>
        <el-radio v-model="userObj.userKind" :label="1">管理员</el-radio>
      </el-form-item>
  <!--   减少代码量，展示删除   -->
  <!--      <el-form-item label="可借总量">-->
  <!--        <el-input v-model="userObj.borrowNumber"></el-input>-->
  <!--      </el-form-item>-->

      <!--   借阅信息部分   -->
      <div class="borrow_body">
        <h3>已借阅书籍</h3>
        <ul class="borrow_items">
          <li v-for="(item,index) of borrowList" :key="item.isbn">
            {{index+1}}
            <div class="borrow_items_bookname">《{{item.name}}》</div>
            <div class="borrow_items_author">图书作者{{item.author}}</div>
            <div class="borrow_items_time">出版社：{{item.press}}</div>
          </li>
        </ul>
      </div>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改用户</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import baseurl from "../../../../const/baseurl";
import {getBookByIsbn} from "../../../../network/book";
import {dateFormat} from "../../../../utils/date";
import {adminUpdate} from "../../../../network/user";

export default {
  name: "AddUserMask",
  props:{
    userObj:{},
    borrowList:{},
  },
  data(){
    return{
      baseurl,
      diyBorrowList:[],//自定义的借阅历史，
    }
  },
  methods:{
    //文件上传时
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      if (res.state==="success"){
        this.userObj.userPortrait=res.img.imgUrl;
      }
    },
    //单击取消按钮时
    cancel(){
      this.$emit('onCancel',false);
    },
    //单击更新按钮时
    onSubmit(){
      adminUpdate(this.userObj).then((result)=>{
        console.log(result);
        if (result.data.data){
          this.$message({
            message: '更新成功',
            type: 'success'
          });
          //跳转空白页,更新数据
          sessionStorage.setItem('sixthUrl','/admin/page/usermanage');
          this.$router.push('/blankPage');
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    },
  },
  created() {
  },
  watch:{
    // 使用监听器，当borrowList更像时执行
    async borrowList(){
      this.diyBorrowList=[];
      for (let i = 0; i < this.borrowList.length; i++) {
        let newBorrow={};
        newBorrow.time=dateFormat(this.borrowList[i].startTime);
        await getBookByIsbn(this.borrowList[i].isbn).then((result)=>{
          console.log(result)
          newBorrow.bookName=result.data.data.name;
          newBorrow.author=result.data.data.author;
        }).catch((reason)=>{
          console.log(reason);
        });
        this.diyBorrowList.push(newBorrow);//将新添加的借阅记录添加到diyBorrow中
      }
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.borrow_items li{/*每个借阅的信息的样式*/
  display: flex;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
  width: 100%;
  overflow: hidden;
}
.borrow_items li div{
  flex: 1;
}
</style>
